<template>
	<view class="hell">
		<view class="sub">
			<u-subsection :list="list" inactiveColor="#fff" :current="curNow" @change="sectionChange" bgColor="#4f4a73">
			</u-subsection>
		</view>
		<view class="context">
			<template v-if="show">
				<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" text="今天没有可预约课程">
				</u-empty>
			</template>

			<view class="makelist" v-if="!show">
				<view class="item" v-for="(item,index) in makelist" @click="godetail(item.makeTimeId)">
					<view class="image">
						<u-image :showLoading="true" :src="item.image" width="80px" height="80px" @click="click">
						</u-image>
					</view>
					<view class="text">
						<view class="text1">{{item.aboutTime}}{{item.projectName}}</view>
						<view class="text2">{{item.site}}(还剩<text
								style="color: #dd1c34;margin: 0rpx 10rpx;">{{item.limitResidue}}</text> 人)</view>
						<view class="text3"><text class="u-line-1">{{item.target}}</text></view>
						<view class="text4">
							预约
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		getmakelist
	} from "@/api/index.js"
	export default {
		data() {
			return {
				list: ['幼儿组', '小学组', '初中组'],
				show: false,
				curNow: 0,
				date: new Date().toISOString(),
				makelist: []
			}
		},

		onLoad() {

			this.getmakelists();
		},
		watch: {

		},

		methods: {
			sectionChange(index) {
				this.curNow = index;
				this.getmakelists(index)
			},
			async getmakelists(e) {


				const {
					data,
					status,
					msg
				} = await getmakelist({
					classify: this.curNow + 1,
					thatVeryDay: this.dateFormat(new Date().toISOString()),
				})
				if (status == 200) {
					this.makelist = data
					this.show = false
				} else {
					uni.showToast({
						title: "请登录开通会员",
						duration: 2000,
						icon: "error"

					})
				}
				if (status != 200 || this.makelist.length == 0) {

					this.show = true

				}




			},
			dateFormat(time) {
				let date = new Date(time);
				let year = date.getFullYear();
				// 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
				let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				// 拼接
				return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
				// return year + "-" + month + "-" + day;
			},
			godetail(e) {
				uni.navigateTo({
					url: '/pages/hall/detail/detail?makeTimeId=' + e
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #4f4a73;
		height: 100vh;
	}

	.hell {
		background-color: #4f4a73;
		height: 100vh;
	}

	.context {
		background-color: #4f4a73;
		padding-bottom: 40rpx;
		height: 100%;
	}

	.makelist {
		background-color: #fff;
		width: 95%;
		margin: 40rpx auto;
		border-radius: 25rpx;
		box-sizing: border-box;
		padding: 25rpx;

		.item {
			display: flex;
			border-bottom: 1rpx solid #4f4a73;
			margin-bottom: 40rpx;
			height: 200rpx;

			&:last-child {
				border-bottom: none;
				margin-bottom: 0;
			}

			.text {
				margin-left: 40rpx;
				color: $u-content-color;

				.text1 {
					font-size: 32rpx;
					font-weight: bold;
					color: $u-main-color;
				}

				.text2 {}

				.text4 {
					border: 1rpx solid #dd1c34;
					text-align: center;
					width: 140rpx;
					border-radius: 25rpx;
					font-weight: 400;
					color: #dd1c34;
				}

			}
		}
	}
</style>
